<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div1 {
				position: absolute;
				top: 100px;
				left: 200px;
				width: 100px;
				height: 60px;
				background-color: aqua;
				line-height: 60px;
				text-align: center;
				transition: all 1s linear;
			}
			
			.div2 {
				position: absolute;
				top: 100px;
				left: 320px;
				width: 100px;
				height: 60px;
				background-color: aqua;
				line-height: 60px;
				text-align: center;
				transition: all 1s linear;
				
			}
			
			.div3 {
				position: absolute;
				top: 100px;
				left: 440px;
				width: 100px;
				height: 60px;
				background-color: aqua;
				line-height: 60px;
				text-align: center;
				transition: all 1s linear;
			}
			
			.div4 {
				position: absolute;
				top: 100px;
				left: 560px;
				width: 100px;
				height: 60px;
				background-color: aqua;
				line-height: 60px;
				text-align: center;
				transition: all 1s linear;
			}
			
			.div5 {
				position: absolute;
				top: 100px;
				left: 680px;
				width: 100px;
				height: 60px;
				background-color: aqua;
				line-height: 60px;
				text-align: center;
				transition: all 1s linear;
			}
			
			.div6 {
				position: absolute;
				top: 100px;
				left: 800px;
				width: 100px;
				height: 60px;
				background-color: aqua;
				line-height: 60px;
				text-align: center;
				transition: all 1s linear;
			}
			
			.div7 {
				position: absolute;
				top: 100px;
				left: 920px;
				width: 100px;
				height: 60px;
				background-color: aqua;
				line-height: 60px;
				text-align: center;
				transition: all 1s linear;
			}
		</style>
	</head>

	<body>
		<p style="color: red;font-size: 20px;">就会拽。。。憋半天没憋出来别的</p>
		<div class="div1">button1</div>
		<div class="div2">button2</div>
		<div class="div3">button3</div>
		<div class="div4">button4</div>
		<div class="div5">button5</div>
		<div class="div6">button6</div>
		<div class="div7">button7</div>
		<!--************************************************************-->
		<br />
		<br />
		<br />

		<p style="color: red;margin-top: 500px;">分别解释数组方法pop() push() unshift() shift()?</p>
		<p>shift:从集合中把第一个元素删除，并返回这个元素的值。unshift: 在集合开头添加一个或更多元素，并返回新的长度。push:在集合中添加元素，并返回新的长度。pop:从集合中把最后一个元素删除，并返回这个元素的值。
		</p>
		<br />
		<br />
		<br />
		<!--**************************************************************-->
		<p style="color: red;">事件绑定和普通事件的区别</p>
		<p>普通事件只支持单个事件，而事件绑定可以添加多个事件</p>
		<!--**************************************************************-->
		<br />
		<br />
		<br />
		<p style="color: red;">ajax里POST和GET请求的区别</p>
		<p>Get请求有如下特性：它会将数据添加到URL中，通过这种方式传递到服务器，通常利用一个问号？ 代表URL地址的结尾与数据参数的开端， 后面的参数每一个数据参数以“名称=值”的形式出现，参数与参数之间利用一个连接符&来区分。
		</p>
		<p>Post请求有如下特性：数据是放在HTTP主体中的，其组织方式不只一种， 有&连接方式，也有分割符方式，可隐藏参数，传递大批数据，比较方便。
		</p>
		<p style="color:red">call和apply的区别</p>
		<p>
			call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的。
		</p>
		<br />
		<br />
		<br />
		<p style="color: red;">什么是事件委托，使用的好处</p>
		<p>利用冒泡的原理，把事件加到父级上，触发执行效果。可以提高性能</p>
		<script type="text/javascript">
			var arrDivToMove = document.getElementsByTagName("div");
			for(var i = 0; i < arrDivToMove.length; i++) {
				arrDivToMove[i].index = i;
				arrDivToMove[i].onmousedown = function(ev) {
					var evObj = ev || window.event;
					var disX = evObj.clientX - arrDivToMove[this.index].offsetLeft;
					var disY = evObj.clientY - arrDivToMove[this.index].offsetTop;
					arrDivToMove[this.index].onmousemove = function(ev) {
						var evObj2 = ev || window.event;
						var x = evObj2.clientX - disX;
						var y = evObj2.clientY - disY;
						arrDivToMove[this.index].style.left = x + "px";
						arrDivToMove[this.index].style.top = y + "px";
						//挪动一个div随机插空
						for(var j = 0; j < arrDivToMove.length - 1; j++) {
							var movePosition = randNum(0,arrDivToMove.length - 1);
							if (i = j +1) {
								arrDivToMove[this.index + 1].style.left = arrDivToMove[this.index].style.left;
							}
						}
					}
					arrDivToMove[this.index].onmouseup = function() {
						arrDivToMove[this.index].onmousemove = "false";
					}
				}
			}

			function randNum(min, max) {
				return Math.floor(Math.random() * (((max + 1) - min))) + min;
			}
		</script>
	</body>

</html>